<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="description" content="克氏孤独症行为量表(CABS)评估结果详情，查看儿童在14个行为项目上的表现评分，了解孩子的发展情况。">
        <meta name="keywords" content="克氏孤独症行为量表, CABS量表结果, 孤独症筛查结果, 儿童发展评估, 自闭症评估结果, 孤独症早期干预">
        <meta name="custom-image" content="https://totemlife.cn/apps/public/cabs-scale-cover.jpg">
        <title>克氏量表评估结果</title>
        <script src="/apps/js/baidu-tongji-mtx.js"></script>
        <link href="/apps/css/bootstrap.min.css" rel="stylesheet">
        <link href="/apps/css/fontawesome-free-6.4.0-web/css/all.css" rel="stylesheet">
        <style>
            /* 自定义橙色背景类 */
            .bg-orange {
                background-color: #fd7e14;
            }

            /* 页面样式 */
            body {
                background-color: #f8f9fa;
                padding-bottom: 60px;
            }

            footer {
                position: fixed;
                bottom: 0;
                width: 100%;
                background-color: rgba(15, 76, 129, 0.8);
                color: white;
                padding: 10px 15px;
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 1000;
            }

            /* 移动端优化 */
            @media (max-width: 576px) {
                /* 标题优化 */
                h1 {
                    font-size: 1.75rem;
                }

                h5 {
                    font-size: 1.1rem;
                }

                /* 表格响应式优化 */
                .table-responsive {
                    font-size: 0.875rem;
                }

                /* 评分表格优化 */
                .score-table th:first-child,
                .score-table td:first-child {
                    width: 40px;
                }

                /* 评分标签优化 */
                .score-badge {
                    min-width: 24px;
                }

                /* 结果显示优化 */
                .display-1 {
                    font-size: 3.5rem;
                }

                /* 报告按钮优化 */
                .report-btn {
                    width: 100%;
                    margin-top: 0.5rem;
                }
            }
        </style>
    </head>
    <body>
        {{!-- 克氏孤独症行为量表评估结果页面 --}}
        <div class="container mt-4 mb-5">
            <div class="row">
                <div class="col-12">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h1>克氏量表评估结果</h1>
                        <div class="d-flex">
                            <a href="/apps/scales/scales-dashboard" class="btn btn-outline-secondary me-2">
                                <i class="fas fa-th-large"></i> 量表工具
                            </a>
                            <a href="/apps/scales/cabs-scale" class="btn btn-outline-secondary">
                                <i class="fas fa-arrow-left"></i> 返回
                            </a>
                        </div>
                    </div>

                    <div class="card shadow-sm mb-4">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <h5 class="card-title">基本信息</h5>
                                    <table class="table table-borderless">
                                        <tr>
                                            <th style="width: 120px;">姓名:</th>
                                            <td>{{assessment.child_name}}</td>
                                        </tr>
                                        <tr>
                                            <th>年龄:</th>
                                            <td>{{assessment.child_age}}岁</td>
                                        </tr>
                                        <tr>
                                            <th>性别:</th>
                                            <td>{{assessment.child_gender}}</td>
                                        </tr>
                                        <tr>
                                            <th>评估日期:</th>
                                            <td>{{formatDate assessment.assessment_date "YYYY-MM-DD HH:mm:ss"}}</td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="col-md-6">
                                    <h5 class="card-title">评估结果</h5>
                                    <div class="text-center py-3">
                                        <div class="display-1 fw-bold mb-2">{{assessment.total_score}}</div>
                                        <div class="fs-4 mb-2">
                                            <span class="badge {{#if (eq assessment.result_level '正常')}}bg-success{{else if (eq assessment.result_level '轻度')}}bg-warning{{else if (eq assessment.result_level '中度')}}bg-orange{{else}}bg-danger{{/if}} px-3 py-2">
                                                {{assessment.result_level}}
                                            </span>
                                        </div>
                                        <p class="mb-0">{{assessment.result_description}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-light d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">详细评分</h5>
                            <a href="/apps/scales/cabs-scale/report/{{assessment.id}}" class="btn btn-primary btn-sm report-btn">
                                <i class="fas fa-file-alt"></i> 生成报告
                            </a>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-hover mb-0 score-table">
                                    <thead>
                                        <tr>
                                            <th style="width: 60px;">序号</th>
                                            <th>行为表现</th>
                                            <th style="width: 80px;" class="text-center">得分</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{#each questions}}
                                        <tr>
                                            <td>{{id}}</td>
                                            <td>{{question_text}}</td>
                                            <td class="text-center">
                                                <span class="badge score-badge {{#if (eq (lookup ../answers id) '0')}}bg-light text-dark{{else if (eq (lookup ../answers id) '1')}}bg-info{{else if (eq (lookup ../answers id) '2')}}bg-warning{{else}}bg-secondary{{/if}}">
                                                    {{#if (lookup ../answers id)}}
                                                        {{lookup ../answers id}}
                                                    {{else}}
                                                        未答
                                                    {{/if}}
                                                </span>
                                            </td>
                                        </tr>
                                        {{/each}}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="card shadow-sm">
                        <div class="card-header bg-light">
                            <h5 class="mb-0">评分说明</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <h6>得分标准</h6>
                                    <ul class="list-group mb-3">
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                            0分
                                            <span class="badge bg-light text-dark">从不</span>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                            1分
                                            <span class="badge bg-info">偶尔</span>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                            2分
                                            <span class="badge bg-warning">经常</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-md-6">
                                    <h6>结果解释</h6>
                                    <ul class="list-group">
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                            总分 ≤ 5
                                            <span class="badge bg-success">正常</span>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                            总分 6-10
                                            <span class="badge bg-warning">轻度</span>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                            总分 11-20
                                            <span class="badge bg-orange">中度</span>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                            总分 > 20
                                            <span class="badge bg-danger">重度</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <div class="alert alert-warning mt-3">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                <strong>注意：</strong>本评估仅供参考，不能替代专业医疗机构的诊断。如有疑虑，请及时咨询专业医师。
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <footer>
            <div class="text-center">
                <a id="tmall-app-home-link" href="weixin://dl/business/?appid=wx1b441d1a37b278e1&path=pages/index/index&env_version=release" class="text-decoration-none">
                    <span id="tmall-app-home-title" style="color: white; font-size: 16px; margin-left: 5px;">
                        <i class="fa fa-house"></i> 广州图腾生命医学研究有限公司
                    <span>
                </a>
                &copy; {{currentYear}}
            </div>
        </footer>

        <!-- 将所有JS文件移到这里，并添加defer属性 -->
        <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" defer></script>
        <script src="/apps/js/bootstrap.bundle.min.js" defer></script>
        <script src="/apps/js/wx-client-dom.js" defer></script>
        <script src="/apps/js/chart.js" defer></script>

    </body>
</html> 
